import React, { Component } from 'react'
import { API } from "../../utils/api"
import TitBar from "../../components/TitBar"
import { getCurrentCity } from "../../utils"
import { AutoSizer, List } from 'react-virtualized';
import { Toast } from 'antd-mobile';
import "./index.scss"
//处理城市数据 
//城市列表数据格式 [a:[{},{}],b:[{},{}]...]
//右侧索引格式 ['a','b','c'...]
const formatCityData = list => {
    // 声明一个数组
    const cityList = []
    // const cityIndex = {}
    //循环后台拿到的数据(每个城市首字母的数据)
    list.forEach(element => {
        //截取每个字段的第一个字母赋值给first
        const first = element.short.substr(0, 1)
        //判断 比如 s 有上海 陕西 那么他本来就是数组，直接push进去，如果没有就放到一个新的数组里
        if (cityList[first]) {
            cityList[first].push(element)
        } else {
            cityList[first] = [element]
        }
    });
    // console.log(cityList)
    // Object.keys 把数组里每一个Key取出来 .sort() 默认abc排序
    const cityIndex = Object.keys(cityList).sort()

    return {
        cityList,
        cityIndex
    }
}
//有房源的城市
const HOUSE_CITY = ['北京', '上海', '广州', '深圳']
// 索引高度A,B,C
const TITLE_HEIGHT = 40
// 城市名臣高度
const NAME_HEIGHT = 45
// 处理字母索引的方法
const formatCityIndex = letter => {
    switch (letter) {
        case '#':
            return '当前定位'
        case 'hot':
            return '热门城市'
        case letter:
            return letter.toUpperCase()
        default:
            break
    }

}
export default class CityList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            cityList: {},
            cityIndex: [],
            active: 0
        }
        // 创建ref对象
        this.cityListComponent = React.createRef()
    }
    async componentDidMount() {
        await this.getCityData()
        //调用measureAllRows方法，提前计算List每一项高度，用于精确定位
        //注意：调用这个方法时，要确保List组件中已经有数据了，如果没数据就会报错
        //解决：让这个方法在获取到数据之后再调用就行了
        this.cityListComponent.current.measureAllRows()
    }

    //获取城市列表数据
    async getCityData() {
        const res = await API.get('/area/city?level=1')
        // console.log(res)
        const { cityList, cityIndex } = formatCityData(res.data.body)
        // console.log(cityList, cityIndex)
        // 获取热门城市
        const hotres = await API.get('/area/hot')
        cityList['hot'] = hotres.data.body
        cityIndex.unshift('hot')
        // 使用封装的获取城市列表方法
        const curCity = await getCurrentCity()
        cityList['#'] = [curCity]
        cityIndex.unshift('#')
        // console.log(cityList, cityIndex, curCity)
        this.setState({
            cityList,
            cityIndex
        })
    }
    //切换城市
    changeCity({ label, value }) {
        if (HOUSE_CITY.indexOf(label) !== -1) {
            localStorage.setItem('hkzf_city', JSON.stringify({ label, value }))
            this.props.history.go(-1)
        } else {
            Toast.info('所选城市没有房源数据', 1.5)
        }
    }
    // 每一行数据的渲染函数
    rowRenderer = ({
        key, // 唯一KEY
        index, // 索引值
        isScrolling, // 当前项是否正在滚动
        isVisible, // 当前项在list中是可见的
        style, // 重点属性，每一行数据都需要加上这个属性，指定每一行的位置 不加会有闪屏之类的问题
    }) => {
        // 返回值就是每一条dom层
        const { cityIndex, cityList } = this.state
        const letter = cityIndex[index]
        // console.log(letter)
        return (
            <div key={key} style={style} className="city" >
                <div className="title">{formatCityIndex(letter)}</div>
                {
                    cityList[letter].map(item => <div key={item.value} className="name" onClick={() => this.changeCity(item)}>{item.label}</div>)
                }
            </div>

        );
    }
    // 动态计算列表每条数据的高度
    getRowHeight = ({ index }) => {
        const { cityList, cityIndex } = this.state
        // 标题索引高度+城市高度*城市数量
        return TITLE_HEIGHT + NAME_HEIGHT * cityList[cityIndex[index]].length
    }

    // 渲染右侧索引列表
    renderCityIndex() {
        const { active, cityIndex } = this.state
        return cityIndex.map((item, index) => (
            <li key={item} className='city-index-item' onClick={() => {
                // console.log(index)
                this.cityListComponent.current.scrollToRow(index)
            }}>
                <span className={active === index ? 'city-index-active' : ''}>{item === 'hot' ? '热' : item.toUpperCase()}</span>
            </li>
        ))
    }
    // 获取List组件中渲染行的信息
    onRowsRendered = ({ startIndex }) => {
        // console.log(startIndex)
        if (this.state.active !== startIndex) {
            this.setState({ active: startIndex })
        }
    }

    render() {
        const { cityIndex } = this.state
        return (
            <div className="cityList">
                <TitBar title='城市选择'></TitBar>
                <AutoSizer>
                    {({ width, height }) => (
                        <List
                            ref={this.cityListComponent}
                            width={width}
                            height={height}
                            rowCount={cityIndex.length}
                            rowHeight={this.getRowHeight}
                            rowRenderer={this.rowRenderer}
                            onRowsRendered={this.onRowsRendered}
                            scrollToAlignment='start'
                        />
                    )}
                </AutoSizer>
                <ul className='city-index'>
                    {this.renderCityIndex()}
                </ul>
                <div className="space-box"></div>
            </div>
        )
    }
}
